<template>
  <view>
    <!-- <map
      id="map"
      style="width: 100%; height: 60vh"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :polyline="polyline"
      show-location
    ></map> -->
    <view> <BaiduMap v-if="carList" :maxHeight="mapMaxHeight" ref="childRef" :carList="carList" /> </view>
    <view style="padding: 15px">
      <p class="text">陈威靖吉利有线粤TG3K25</p>
      <view class="horizontal-line"></view>
      <div class="tab-container">
        <!-- 切换栏 -->
        <div class="tab-bar">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-item', { active: currentTab === index }]"
            @click="switchTab(index)"
          >
            {{ tab.label }}
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="tab-content">
          <view class="container">
            <view class="form-item">
              <text>开始：</text>
              <uni-datetime-picker v-model="startTime" type="datetime" />
            </view>

            <view class="form-item">
              <text>结束：</text>
              <uni-datetime-picker v-model="endTime" type="datetime" />
            </view>
          </view>
        </div>
      </div>
      <button @click="startPlay" class="start">开始回放</button>
      <!-- <button @click="pausePlay">暂停回放</button> -->
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
// const { BMapWX } = require('../../static/bmap-wx.js')
import BaiduMap from '../../components/BaiduMap.vue'
import { deviceTrackPlayBack } from '@/services/playback'
import { onLoad } from '@dcloudio/uni-app'

// 获取子组件的引用
const childRef = ref()
const mapMaxHeight = ref(60)
// 当前选中的选项卡索引
const currentTab = ref(0)
// 上级文件传过来的设备id
const id = ref()
// 选项卡数据
const tabs = ref([
  { label: '上周' },
  { label: '本周' },
  { label: '昨天' },
  { label: '今天' },
  { label: '最近' },
])
const carList = reactive([])
// 格式化时间为 YYYY-MM-DD HH:mm:ss
const formatTime = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 切换选项卡
const switchTab = (index) => {
  const now = new Date() // 当前时间
  const today = now.getDay() // 当前星期几 (0: 周日, 1: 周一, ..., 6: 周六)
  const lastMonday = new Date(now) // 上周一
  const lastFriday = new Date(lastMonday) // 上周五
  const yesterdayStart = new Date(now) // 昨天的凌晨 = new Date(now) // 昨天
  if (index == 0) {
    lastMonday.setDate(now.getDate() - today - 6) // 计算上周一
    lastMonday.setHours(0, 0, 0, 0) // 设置为上周一的零点
    lastFriday.setDate(lastMonday.getDate() + 6) // 计算上周五
    lastFriday.setHours(0, 0, 0, 0) // 设置为上周五的零点
    startTime.value = formatTime(lastMonday) // 设置开始时间为上周一的零点
    endTime.value = formatTime(lastFriday) // 设置结束时间为上周五的零点
  } else if (index == 1) {
    lastMonday.setDate(now.getDate() - today + 1) // 计算上周一
    lastMonday.setHours(0, 0, 0, 0) // 设置为上周一的零点
    lastFriday.setDate(lastMonday.getDate() + 6) // 计算上周五
    lastFriday.setHours(23, 59, 59, 59) // 设置为上周五的零点
    startTime.value = formatTime(lastMonday) // 设置开始时间为上周一的零点
    endTime.value = formatTime(lastFriday) // 设置结束时间为上周五的零点

    // // 设置时间为上周
    // const now = new Date() // 当前时间
    // const lastWeekStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000) // 当前时间的前7天
    // startTime.value = formatTime(lastWeekStart) // 设置开始时间
    // endTime.value = formatTime(now) // 设置结束时间为当前时间
  } else if (index == 2) {
    yesterdayStart.setDate(now.getDate() - 1) // 当前时间的前一天
    yesterdayStart.setHours(0, 0, 0, 0) // 设置为昨天的 00:00:00
    const yesterdayEnd = new Date(yesterdayStart) // 昨天的 23:59:59
    yesterdayEnd.setHours(23, 59, 59, 0) // 设置为昨天的 23:59:59

    startTime.value = formatTime(yesterdayStart) // 设置开始时间为昨天的凌晨
    endTime.value = formatTime(yesterdayEnd) // 设置结束时间为昨天的 23:59:59
  } else if (index == 3) {
    const todayStart = new Date(now) // 今天的凌晨
    todayStart.setHours(0, 0, 0, 0) // 设置为今天的 00:00:00
    const todayEnd = new Date(now) // 今天的 23:59:59
    todayEnd.setHours(23, 59, 59, 0) // 设置为今天的 23:59:59
    startTime.value = formatTime(todayStart) // 设置开始时间为今天的凌晨
    endTime.value = formatTime(todayEnd) // 设置结束时间为今天的 23:59:59
  }
  currentTab.value = index
}

const minDate = ref('2023-01-01 00:00:00')
const maxDate = ref('2023-12-31 23:59:59')
const startTime = ref('')
const endTime = ref('')
// 开始回放
const startPlay = () => {
  getData()
}
onLoad((options) => {
  id.value = options.id
})
const getData = async () => {
  const res = await deviceTrackPlayBack(id.value, startTime.value, endTime.value)
  console.log(res, '11111')
  carList.value = res.data || []
  childRef.value.togglePlay()
}
</script>
<style scoped>
.text {
  height: 40px;
  line-height: 40px;
}
.horizontal-line {
  margin-top: 5px;
  width: 100%; /* 或者具体的宽度 */
  height: 1px; /* 线的厚度 */
  background-color: #ebeef5; /* 线的颜色 */
}
.tab-container {
  /* height: 50px; */
  font-family: Arial, sans-serif;
}

.tab-bar {
  height: 60px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  align-items: center;
  font-size: 13px;
}

.tab-item {
  line-height: 10px;
  /* height: 30px; */
  padding: 10px 20px;
  cursor: pointer;
}

.tab-item.active {
  /* line-height: 10px; */
  border-radius: 8px;
  /* border-bottom: 2px solid #007aff; */
  background-color: #20272d;
  color: #fff;
}

.tab-item:hover {
  /* background-color: #f0f0f0; */
}

.tab-content {
  padding: 10px 20px 0px 20px;
  border: 1px solid #ccc;
  border-top: none;
}
.container {
  /* padding: 20px; */
}

.form-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}

.form-item text {
  margin-right: 10px;
}
.start {
  background-color: #22272d;
  color: #fff;
  margin-top: 10px;
}
</style>
